import React, { Component } from 'react';
class Page extends Component {
    render() {
        return (
            <div className='page-container page flex-page' style={{ top: (this.props.page * 100) + '%' }}>
                <div className='title' style={{ transform: `translateX(${this.props.percent - 100}%)` }}>为何使用</div>
                <div className='container auto-height' style={{ transform: `translateX(${(100 - this.props.percent)}%)` }}>
                    <div className='title'>更小的容量</div>
                    <div>相比于jpg/png等图片格式，在表达图形时，svg可以更方便地创建体积更小的图片内容</div>
                </div>
                <div className='container auto-height' style={{ transform: `translateX(${(this.props.percent - 100)}%)` }}>
                    <div className='title'>兼容Html</div>
                    <div>svg完全兼容html，除了以img标签加载外，更可以直接将代码嵌入页面，减少请求次数，降低服务器压力</div>
                </div>
                <div className='container auto-height' style={{ transform: `translateX(${(100 - this.props.percent)}%)` }}>
                    <div className='title'>更好的互动</div>
                    <div>直接写入页面时，svg内的元素具有完整的DOM事件机制，可以轻松完成交互设计的实现</div>
                </div>
                <div className='container auto-height' style={{ transform: `translateX(${(this.props.percent - 100)}%)` }}>
                    <div className='title'>稳定可靠</div>
                    <div>SVG的历史悠久，且基本没有迭代升级，更是几乎拥有所有版本浏览器的良好支持，一经掌握，永久适用。</div>
                </div>
                <div className='container auto-height' style={{ transform: `translateX(${(100 - this.props.percent)}%)` }}>
                    <div className='title'>表现力丰富</div>
                    <div>使用SVG及相关工具，你可以自由发挥你的创造力，几乎不存在上限。其内置的渲染功能和动画功能配合Js脚本更能锦上添花</div>
                </div>
            </div>
        );
    }
}

export default Page;
